import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// 权限判断指令
import permission from '@/directive/permission/index.js'
import { getSecondCheckCreateClub, secondCheckCreateClub, getClubDetailByPerm } from '@/api/club'
import axios from 'axios'
import { getFileType, isImage, isMsOfficeFile, isPdf } from '@/utils/index'

// 默认查询条件
const defaultListQuery = {
  page: 1,
  limit: 10,
  ordering: '-updated_time'
}

const defaultForm = {
  id: undefined,
  name: undefined,
  is_active: true
}

export default {
  components: { Pagination },
  directives: { permission },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '未审核': 'info',
        '通过': 'success',
        '不通过': 'danger'
      }
      return statusMap[status]
    },
    activeTextFilter(type) {
      const typeMap = {
        true: '启用',
        false: '禁用'
      }
      return typeMap[type]
    },
    activeStyleFilter(status) {
      const statusMap = {
        true: 'success',
        false: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      total: 0,
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: false,
      dataList: [],
      clubList: [],
      dialogViewFormVisible: false,
      dialogStatus: '',
      dialogText: '',
      form: Object.assign({}, defaultForm),
      previewImg: false,
      priviewPicture: false,
      previewurl: '',
      rules: {
        check_status: [{ required: true, message: '该项为必填项', trigger: 'change' }],
        check_opinion: [{ required: true, message: '该项为必填项', trigger: 'blur' }]
      },
      activeName: ['check_history']
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getList()
    },

    // 获取表格数据
    getList() {
      this.listLoading = true
      getSecondCheckCreateClub(this.listQuery).then(res => {
        this.dataList = res.results
        this.total = res.count
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 搜索事件
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置区域搜索条件
    resetFilter() {
      this.listQuery = Object.assign({}, defaultListQuery)
    },

    // 文件在线预览
    onlineRead(file) {
      const url = file.url
      const fileType = getFileType(url)
      if (isMsOfficeFile(fileType)) {
        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url)
      } else if (isImage(fileType)) {
        this.imgUrl = url
        this.previewImg = true
      } else {
        window.open(url)
      }
    },
    // 下载文件
    downloadFile(file) {
      const url = file.url
      const filename = file.name
      const fileType = getFileType(url)
      if (isPdf(fileType)) {
        axios({
          url: url,
          method: 'get'
        }).then(res => {
          console.log(res)

          const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

          const link = document.createElement('a')

          link.style.display = 'none'

          link.href = url

          link.setAttribute('download', filename)

          document.body.appendChild(link)

          link.click()

          document.body.removeChild(link)
        })
      } else {
        window.open(url)
      }
    },

    // 点击进行审核
    showViewDialog(row) {
      const loading = this.$loading({
        lock: true,
        text: '正在获取数据',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getClubDetailByPerm(row.id).then(res => {
        loading.close()
        this.form = res
        this.form.first_check_status = ''
      }).catch((error) => {
        this.$message.error(error.response.data.message)
      })
      // this.form = Object.assign({}, row)
      this.dialogStatus = 'view'
      this.dialogText = row.title
      this.dialogViewFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },

    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在处理',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          secondCheckCreateClub(this.form.id, this.form).then(response => {
            loading.close()
            this.dialogViewFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '审核成功',
              type: 'success',
              duration: 2000
            })
          }).catch((error) => {
            loading.close()
            this.$notify({
              title: '失败',
              message: error.response.data,
              type: 'error',
              duration: 0
            })
          })
        } else {
          console.log(this.form)
        }
      })
    },

    // 预览图片
    previewImage(file) {
      this.previewPicture = true
      this.previewurl = file.url
      this.$refs.viewer.$viewer.show()
    }

  }
}
